<template>
  <div>
    <h3>我是首页</h3>
    <p>首页内容 阿巴巴</p>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>

    <router-view></router-view>

    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  name: "Home",

  data() {
    return {
      message: "你好",
      path: "/home/news",
    };
  },

  // 创建组件时进入
  created() {
    console.log("[created] 首页 >>> 开始创建\n\n");
  },

  // 组件销毁时进入
  destroyed() {
    console.log("[destroyed] 首页 >>> 被销毁\n\n");
  },

  // activated 与 deactivated 只有在状态被保持的时候才可以触发 [keep-alive]

  // 页面保持活跃
  activated() {
    this.$router.push(this.path);
    console.log("[activated] 首页 >>> 活跃中\n\n");
  },

  // 页面失去活跃
  deactivated() {
    // console.log("[deactivated] 首页 >>> 失去活跃", this.$route, "\n\n");
  },

  // 路由守卫 离开之前触发
  beforeRouteLeave(to, from, next) {
    console.log("[离开前路由]", this.$route.path);
    this.path = this.$route.path;
    next();
  },
};
</script>

<style scoped>
</style>